<template>
    <view>
        <u-navbar title="历史溯源记录" :background="background" :height="50"></u-navbar>
        <view class="">
            <view class="p-30 bg-white m-t-20 br12" v-for="item in dataList">
                <view class="flex row-between border p-b-20">
                    <view class="xxl bold">{{getBrandName(item.brand)}}</view>
                    <view class="">{{item.updateDate}}</view>
                </view>
                <view class="m-t-20 flex col-cneter ">
                    <image class="goods-img" :src="`${IMG_BASE_URL}${item.photoAddress}`" mode="">
                    </image>
                    <view class="">
                        <view class=" m-t-10">{{item.colour}} 手围尺寸：{{item.handCircumferenceSize}}
                            表盘尺寸：{{item.dialSize}}
                        </view>
                        <view class=" m-t-20 text-color bold">{{item.productModel}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue'
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import {
        apiGetHistoricalRecords,
        apiGetAllBrand
    } from '@/api/index.js'
    import {
        IMG_BASE_URL
    } from '@/utils/appConfig.js'


    const background = {
        backgroundImage: 'linear-gradient(261deg, #FBC260, #FDDB9B);'
    }

    const query = ref({
        "pageSize": 10,
        "current": 1
    })
    const dataList = ref([])
    const brandList = ref([])

    //查询品牌名称
    const getBrandName = (bid) => {
        const brand = brandList.value.find(item => item.id == bid)
        return brand ? brand.brandName : ''
    }

    onLoad(() => {
        apiGetHistoricalRecords({
            ...query.value
        }).then(res => {
            dataList.value = res.data.records
        }).catch(err => {

        })
        apiGetAllBrand().then(res => {
            brandList.value = res.data
        })

    })
</script>

<style lang="scss">
    .goods-img {
        width: 150rpx;
        height: 150rpx;
        margin-right: 30rpx;
    }

    .text-color {
        color: #BE4B16;
    }

    .border {
        border-bottom: 2rpx solid gray;
    }
</style>